<template>
    <div class="maxBox" v-loading="loading" element-loading-text="拼命加载中" element-loading-background="rgba(0, 0, 0, 0.7)"
        element-loading-spinner="el-icon-loading">

        <div class="headerBox">
            <!-- 用户头像处，下拉框 -->
            <el-dropdown>
                <span class="el-dropdown-link">
                    <el-avatar
                        src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a19ca7a7-fcb0-40c9-80e9-884ca372d71e/766741fe-7907-4271-8ef3-02adfb0748e6.jpg">
                    </el-avatar><i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <!-- 这里的el-dropdown 点击后click不生效（需要在click后面跟上.native后才可以生效） -->
                    <el-dropdown-item @click.native="goMyHome">个人中心</el-dropdown-item>
                    <el-dropdown-item @click.native="goBack">回到首页</el-dropdown-item>
                    <el-dropdown-item @click.native="goLogin">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>

        <!-- 固定定位按钮 -->
        <div class="fiexdBtn">
            <el-tooltip content="点击刷新" placement="right" effect>
                <el-button @click="reloadBtn" type="success" round icon="el-icon-refresh-left">刷新页面</el-button>
            </el-tooltip>
        </div>

        <!-- 表格 -->
        <el-table highlight-current-row :data="moveData" style="width:100%;padding-left:50px;padding-top:20px">
            <!-- 点击  查看下拉信息 -->
            <el-table-column type="expand">
                <template v-slot="{ row }">
                    <el-row>
                        <el-col :span="12">视频ID : {{ row.id }}</el-col>
                        <el-col :span="12">视频标题：{{ row.userName }}</el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">视频介绍：{{ row.title }}</el-col>
                        <el-col>用户头像：
                            <el-image class="userPic" :src="row.userPic" />
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">视频时长：{{ row.duration }}</el-col>
                    </el-row>
                </template>
            </el-table-column>

            <!-- 表格数据 -->
            <el-table-column prop="id" label="视频ID"></el-table-column>
            <el-table-column prop="userName" label="视频标题"></el-table-column>
            <el-table-column prop="title" label="视频介绍"></el-table-column>
            <el-table-column prop="userPic" label="用户头像">
                <template v-slot="{ row }">
                    <el-tooltip content="查看大图" placement="right" effect="light">
                        <!-- :preview-src-list="srcList" 【el-image标签中，用于点击图片 放大预览效果】 -->
                        <el-image class="imgBox" :src="row.userPic" :preview-src-list="srcList"></el-image>
                    </el-tooltip>
                </template>
            </el-table-column>
            <!-- <el-table-column prop="playUrl" label="视频">
                <template v-slot="{ row }">
                    <video class="videoBox" muted="muted" :src="row.playUrl" type="video/mp4"></video>
                </template>
            </el-table-column> -->
            <el-table-column prop="duration" label="视频时长"></el-table-column>
            <el-table-column label="操作">
                <template v-slot="{ row }">
                    <el-button size="mini" @click="checkRow(row)">查看</el-button>
                    <el-button size="mini" type="danger" @click="deleteRow(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div>总条数：{{ total }} 条</div>
        <!-- <div>
            视频：
            <video :src="videoOne" type="video/mp4"></video>
        </div> -->


        <!-- 点击表格的查看按钮 dialog弹窗 -->
        <el-dialog title="视频信息" :visible.sync="dialogVisible" width="45%" :before-close="handleClose">
            <el-form disabled>
                <el-form-item>
                    视频ID: <el-input v-model="moveInfo.id"></el-input>
                </el-form-item>
                <el-form-item>
                    视频标题：<el-input v-model="moveInfo.userName"></el-input>
                </el-form-item>
                <el-form-item>
                    视频介绍：<el-input v-model="moveInfo.title" type="textarea"></el-input>
                </el-form-item>
                <el-form-item>
                    用户头像：
                    <el-image style="width: 100px; height: 100px" :src="moveInfo.userPic"></el-image>
                </el-form-item>
                <el-form-item>
                    视频时长：<el-input v-model="moveInfo.duration"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
// 引入接口文件
import { videoInfo } from '@/api/myHome/myhome.api';
// 引入element组件库的提示组件
import { Message } from 'element-ui';


export default {
    data() {
        return {
            // 传的参数
            urlData: {
                page: 0,
                size: 2
            },
            // video:'http://vd2.bdstatic.com/mda-nc5e6rphet3kr6td/cae_h264_delogo/1646561464607182321/mda-nc5e6rphet3kr6td.mp4',
            // 总条数
            total: 0,
            // 视频数据
            moveData: [],
            // 点击查看弹窗
            dialogVisible: false,
            // 所用的字段
            moveInfo: {
                id: '',       //视频id
                userName: '', //视频标题
                title: '',    //视频介绍
                userPic: '',  //用户头像
                duration: '', //视频时长
            },
            // 表格图片 点击放大预览效果
            srcList: [],
            // 视频列表
            videoSrc: [],
            // loading加载效果
            loading: false,
            // videoOne: ''  //单个视频地址
        }
    },
    methods: {
        // 刷新当前页面按钮
        reloadBtn() {
            this.$router.go(0);
        },
        // 点击弹窗外/x，关闭弹窗
        handleClose() {
            this.dialogVisible = false;
        },
        // 查看按钮
        checkRow(row) {
            console.log(row);
            this.dialogVisible = true; //dialog弹窗打开
            this.moveInfo = row;
        },
        // 删除按钮
        deleteRow() {
            Message.error('默认数据，删不掉');
        },
        // 头像下拉 个人中心按钮
        goMyHome() {
            Message.error('已经在当前页面了哦');
        },
        // 头像下拉 回首页按钮
        goBack() {
            setTimeout(() => {
                this.$router.push('/indexCmpt');
            }, 200);
        },
        // 退出登录按钮，200毫秒之后，跳转到登录页面
        goLogin() {
            setTimeout(() => {
                this.$router.push('/loginPage');
            }, 200);
        }
    },

    // 页面加载调用
    created() {
        this.loading = true; //进入页面实现loading效果
        // 接口加上需要传的参数
        videoInfo(this.urlData).then(res => {
            setTimeout(() => {
                this.loading = false  //接口调用成功之后 300毫秒后 关闭loading效果
            }, 300);
            console.log(res);
            this.moveData = res.data.result.list;
            this.total = res.data.result.total;
            // 点击表格中图片时，放大效果【遍历返回每张图片到srcList】
            this.srcList = res.data.result.list.map(item => {
                return item.userPic;
            })
            // 提示成功信息
            if (res.data.code === 200) {
                Message.success(res.data.message);
            } else {
                Message.error('warning!')
            }

            // 遍历视频列表 
            this.videoSrc = res.data.result.list.map(item => {
                return item.playUrl;
            })
            console.log('视频列表', this.videoSrc);
            // this.videoOne = res.data.result.list[0].playUrl    //单条视频链接
        }).catch(err => {
            Message.error(err);
            console.log('连接超时，请稍后再试', err.message);
        })
    }
}
</script>

<style lang="less" scoped>
.maxBox {
    text-align: left;
    width: 100%;
    height: 100%;
}

// 顶部盒子
.headerBox {
    display: flex;
    justify-content: flex-end;
    padding: 5px 15px 0 0;
    background: rgb(243, 243, 243);
}

// 表格内图片盒子
.imgBox {
    width: 80px;
    height: 80px;
}

// 视频盒子【】
.videoBox {
    width: 120px;
    height: 80px;
    border: 1px dashed red;
}

// 头像区
.el-dropdown {
    cursor: pointer;
}

// 表格用户头像
.userPic {
    width: 70px;
    height: 70px;
}

// loading效果遮罩层
/deep/ .el-loading-mask {
    width: 100%;
    height: 1259px;
}

// 表格展开数据
/deep/ .el-table__cell {
    padding: 12px 0 12px 14px;
}

// 表格展开背景
/deep/ .el-table__expanded-cell {
    background: #fce9e9;
}


// 固定按钮
.fiexdBtn {
    position: fixed;
    left: 0;
    top: 45%;
    z-index: 9999;
}
</style>